<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Need to show slides? There's nothing easier, use the carousel component. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Carousel - Metro 4 :: Popular HTML, CSS and JS library</title>

    <style>
        .bullet-big {
            width: 1rem!important;
            height: 1rem!important;
        }
    </style>
    <script>
        var metroCarouselSetup = {
            duration: 500
        }
    </script>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Carousel</a></li>
                    <li class="toc-entry"><a href="#_carousel_about">About</a></li>
                    <li class="toc-entry"><a href="#_carousel_size">Carousel size</a></li>
                    <li class="toc-entry">
                        <a href="#_carousel_controls">Controls</a>
                        <ul>
                            <li class="toc-entry"><a href="#_carousel_controls_mouse">Show when mouse</a></li>
                            <li class="toc-entry"><a href="#_carousel_controls_hide">Hide controls</a></li>
                            <li class="toc-entry"><a href="#_carousel_controls_symbols">Left and right</a></li>
                            <li class="toc-entry"><a href="#_carousel_controls_bullets">Bullets</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_carousel_slides">Slides</a></li>
                    <li class="toc-entry">
                        <a href="#_carousel_effects">Effects</a>
                        <ul>
                            <li class="toc-entry"><a href="#_carousel_effects_duration">Duration &amp; period</a></li>
                            <li class="toc-entry"><a href="#_carousel_effects_duration_slide">Slide timings</a></li>
                            <li class="toc-entry"><a href="#_carousel_effects_func">Easing function</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_carousel_options">Options</a></li>
                    <li class="toc-entry"><a href="#_carousel_events">Events</a></li>
                    <li class="toc-entry"><a href="#_carousel_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_carousel_customize">Customize</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Carousel</h1>
                <p class="text-leader">
                    Need to show slides? There's nothing easier, use the carousel component.
                </p>

                <!-- ads-html -->

                <h3 id="_carousel_about">About</h3>
                <p>
                    In Metro 4 the process of the creating <code>carousel</code> it very easy. To create <code>carousel</code> you mus add attribute <code>data-role="carousel"</code> to element and define <code>slides</code>.
                    Also you can set any options with additional attributes.
                </p>
                <div class="example">
                    <div data-role="carousel"
                         data-auto-start="true"
                         data-cls-controls="fg-white"
                         data-cls-bullet="bullet-big"
                         data-bullets-position="right"
                         data-control-next="<span class='mif-chevron-right fg-cyan'></span>"
                         data-control-prev="<span class='mif-chevron-left fg-cyan'></span>"

                    >
                        <div class="slide">
                            <div class="p-2 pl-10 pr-10 h-100">
                                <div class="row flex-align-center h-100">
                                    <div class="cell-md-4 text-center">
                                        <img src="images/pumba.png" class="img-fluid">
                                    </div>
                                    <div class="cell-md-8">
                                        <h1 class="text-light">Pumba</h1>
                                        <p class="mt-4 mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p>
                                        <button class="button alert">Show more...</button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="slide" data-cover="images/pumba-bg.jpg"></div>

                        <div class="slide" data-cover="images/bg-4.jpg">
                            <div class=" p-2 pl-10 pr-10 h-100">
                                <div class="row flex-align-center h-100">
                                    <div class="cell-md-8">
                                        <p class="indent-letter">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p>
                                    </div>
                                    <div class="cell-md-4 text-center">
                                        <div class="img-container drop-shadow">
                                            <img src="images/timon_pumba.jpg">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;div data-role="carousel"
                         data-cls-bullet="bullet-big"
                         data-auto-start="true"
                         data-cls-controls="fg-white"
                         data-bullets-position="right"
                         data-control-next="&lt;span class='mif-chevron-right fg-cyan'&gt;&lt;/span&gt;"
                         data-control-prev="&lt;span class='mif-chevron-left fg-cyan'&gt;&lt;/span&gt;"
                    &gt;
                        &lt;div class="slide p-2 pl-10 pr-10"&gt;
                            &lt;div class="row flex-align-center h-100"&gt;
                                &lt;div class="cell-md-4 text-center"&gt;
                                    &lt;img src="images/pumba.png" class="img-fluid"&gt;
                                &lt;/div&gt;
                                &lt;div class="cell-md-8"&gt;
                                    &lt;h1 class="text-light"&gt;Pumba&lt;/h1&gt;
                                    &lt;p class="mt-4 mb-4"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting...&lt;/p&gt;
                                    &lt;button class="button alert"&gt;Show more...&lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;

                        &lt;div class="slide" data-cover="images/pumba-bg.jpg"&gt;&lt;/div&gt;

                        &lt;div class="slide p-2 pl-10 pr-10" data-cover="images/bg-4.jpg"&gt;
                            &lt;div class="row flex-align-center h-100"&gt;
                                &lt;div class="cell-md-8"&gt;
                                    &lt;p class="indent-letter"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting...&lt;/p&gt;
                                &lt;/div&gt;
                                &lt;div class="cell-md-4 text-center"&gt;
                                    &lt;div class="img-container drop-shadow"&gt;
                                        &lt;img src="images/timon_pumba.jpg"&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_carousel_size">Carousel size</h3>
                <p>
                    You can set <code>carousel size</code> with attributes <code>data-width</code> (default: 100%) and <code>data-height</code> (default: 16/9).
                    For <code>data-width</code> you can set <code>% value</code> or <code>px value</code>.
                    For height you can set: <code>16/9</code> (default), <code>21/9</code>, <code>4/3</code> or <code>px value</code>.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <div data-role="carousel" data-height="16/9" data-controls="false" data-bullets="false" class="border bd-gray border-4">
                                <div class="slide d-flex flex-justify-center flex-align-center">
                                    <span class="h3">16/9</span>
                                </div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <div data-role="carousel" data-height="21/9" data-controls="false" data-bullets="false" class="border bd-gray border-4">
                                <div class="slide d-flex flex-justify-center flex-align-center">
                                    <span class="h3">21/9</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="cell-md-6">
                            <div data-role="carousel" data-height="4/3" data-controls="false" data-bullets="false" class="border bd-gray border-4">
                                <div class="slide d-flex flex-justify-center flex-align-center">
                                    <span class="h3">4/3</span>
                                </div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <div data-role="carousel" data-height="200" data-controls="false" data-bullets="false" class="border bd-gray border-4">
                                <div class="slide d-flex flex-justify-center flex-align-center">
                                    <span class="h3">Height 200px</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <p>
                    Also you can set <code>media</code> values for carousel height. Value can be in format:
                    <strong>@ (media_query), value | (media_query), value | ...</strong>.
                </p>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                         data-height="@ (max-width: 992px),500 | (max-width: 768px),350 | (max-width: 576px),100"&gt;
                        &lt;div class="slide d-flex flex-justify-center flex-align-center"&gt;
                            &lt;span class="h3"&gt;Slide&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div data-role="carousel"
                         data-height="@ (max-width: 992px),21/9 | (max-width: 768px),16/9 | (max-width: 576px),4/3"&gt;
                        &lt;div class="slide d-flex flex-justify-center flex-align-center"&gt;
                            &lt;span class="h3"&gt;Slide&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_carousel_controls">Controls</h3>
                <p>
                    For sliding the slides user can use carousel <code>controls</code>, such as <code>left</code>, <code>right</code> and <code>bullets</code>.
                    By default controls placed are inside the carousel slides area. To put <code>controls</code> outside the carousel set attribute <code>data-controls-outside="true"</code>.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <h5 class="text-center">Inside</h5>
                            <div data-role="carousel" data-cls-controls="fg-white">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <h5 class="text-center">Outside</h5>
                            <div data-role="carousel" data-controls-outside="true">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;div data-role="carousel"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div data-role="carousel" data-controls-outside="true"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_carousel_controls_mouse">Show controls when mouse enter</h4>
                <p>
                    With attribute <code>data-controls-on-mouse="true"</code> you can set visible controls only if mouse enter to carousel.
                </p>
                <div class="example">
                    <div data-role="carousel" data-controls-on-mouse="true" data-cls-controls="fg-white">
                        <div class="slide" data-cover="images/1.jpg"></div>
                        <div class="slide" data-cover="images/2.jpg"></div>
                        <div class="slide" data-cover="images/3.jpg"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                         data-controls-on-mouse="true" data-cls-controls="fg-white"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_carousel_controls_hide">Hide controls</h4>
                <p>
                    You can hide controls with attributes <code>data-controls="false"</code> and <code>data-bullets="false"</code>.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <h5 class="text-center">No left, right</h5>
                            <div data-role="carousel" data-controls="false">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <h5 class="text-center">No bullets</h5>
                            <div data-role="carousel" data-bullets="false" data-cls-controls="fg-white">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                         data-controls="false"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;

                    &lt;div data-role="carousel"
                         data-bullets="false"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_carousel_controls_symbols">Left and right symbols</h4>
                <p>
                    You can change <code>left</code> and <code>right</code> slides switchers symbols with attributes <code>data-control-next</code> and <code>data-control-prev</code>.
                </p>
                <div class="example">
                    <div data-role="carousel"
                         data-cls-controls="fg-white"
                         data-control-next="<span class='mif-chevron-right'></span>"
                         data-control-prev="<span class='mif-chevron-left'></span>">
                        <div class="slide" data-cover="images/1.jpg"></div>
                        <div class="slide" data-cover="images/2.jpg"></div>
                        <div class="slide" data-cover="images/3.jpg"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                         data-cls-controls="fg-white"
                         data-control-next="&lt;span class='mif-chevron-right'&gt;&lt;/span&gt;"
                         data-control-prev="&lt;span class='mif-chevron-left'&gt;&lt;/span&gt;"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_carousel_controls_bullets">Bullets</h4>
                <p>
                    You can use one of three predefined variants of <code>bullets</code>.
                    To set bullet type use attribute <code>data-bullets-style</code> with values: <code>circle</code>, <code>square</code> (default), <code>rect</code> or <code>diamond</code>.
                    To set bullet size use attribute <code>data-bullets-size</code> with values: <code>mini</code>, <code>small</code>, <code>default</code> or <code>large</code>.
                    Also you can set bullets position via attribute <code>data-bullets-position</code>. You can set bullet on the <code>left</code>, <code>right</code> or <code>center</code>.
                    The default value for <code>data-bullets-position</code> is a <code>center</code>.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <div data-role="carousel" data-bullets-style="circle" data-controls="false">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <div data-role="carousel" data-bullet-style="square" data-controls="false">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="cell-md-6">
                            <div data-role="carousel" data-bullets-style="rect" data-controls="false" data-bullets-position="left">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <div data-role="carousel" data-bullets-style="diamond" data-controls="false" data-bullets-position="right">
                                <div class="slide" data-cover="images/1.jpg"></div>
                                <div class="slide" data-cover="images/2.jpg"></div>
                                <div class="slide" data-cover="images/3.jpg"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel" data-bullet-style="circle"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div data-role="carousel" data-bullet-style="square"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div data-role="carousel"
                        data-bullet-style="rect" data-bullets-position="left"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div data-role="carousel"
                        data-bullet-style="diamond" data-bullets-position="right"&gt;
                        &lt;div class="slide" data-cover="images/1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/3.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_carousel_slides">Slides</h3>
                <p>
                    The slide is a block element with class <code>.slide</code>.
                    For each slide you can set background image.
                    To set background image for slide, add attribute <code>data-cover="..."</code> to slide.
                </p>
                <p class="remark alert">
                    By default, <code>slide</code> not have <code>margin</code> or <code>padding</code>. You must set it manually if need.
                </p>
                <div class="example">
                    <div data-role="carousel" data-cls-controls="fg-cyan">
                        <div class="slide" data-cover="images/bg-1.jpg"></div>
                        <div class="slide" data-cover="images/bg-2.jpg"></div>
                        <div class="slide" data-cover="images/bg-3.jpg"></div>
                        <div class="slide" data-cover="images/bg-4.jpg"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel" data-cls-controls="fg-cyan"&gt;
                        &lt;div class="slide" data-cover="images/bg-1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-3.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-4.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_carousel_effects">Effects</h3>
                <p>
                    Slide change is accompanied by various effects. Currently supports four effects:
                        <code>slide</code>,
                        <code>slide-v</code>,
                        <code>switch</code> and
                        <code>fade</code>.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <h5>switch</h5>
                            <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="switch" data-controls="false" data-bullets="false" data-auto-start="true">
                                <div class="slide" data-cover="images/bg-1.jpg"></div>
                                <div class="slide" data-cover="images/bg-2.jpg"></div>
                                <div class="slide" data-cover="images/bg-3.jpg"></div>
                                <div class="slide" data-cover="images/bg-4.jpg"></div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <h5>fade</h5>
                            <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="fade" data-controls="false" data-bullets="false" data-auto-start="true">
                                <div class="slide" data-cover="images/bg-1.jpg"></div>
                                <div class="slide" data-cover="images/bg-2.jpg"></div>
                                <div class="slide" data-cover="images/bg-3.jpg"></div>
                                <div class="slide" data-cover="images/bg-4.jpg"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="cell-md-6">
                            <h5>slide</h5>
                            <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide" data-controls="false" data-bullets="false" data-auto-start="true">
                                <div class="slide" data-cover="images/bg-1.jpg"></div>
                                <div class="slide" data-cover="images/bg-2.jpg"></div>
                                <div class="slide" data-cover="images/bg-3.jpg"></div>
                                <div class="slide" data-cover="images/bg-4.jpg"></div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <h5>slide-v</h5>
                            <div data-role="carousel" data-cls-controls="fg-cyan" data-effect="slide-v" data-controls="false" data-bullets="false" data-auto-start="true">
                                <div class="slide" data-cover="images/bg-1.jpg"></div>
                                <div class="slide" data-cover="images/bg-2.jpg"></div>
                                <div class="slide" data-cover="images/bg-3.jpg"></div>
                                <div class="slide" data-cover="images/bg-4.jpg"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel" data-effect="slide"&gt;
                    ...
                    &lt;/div&gt;

                    &lt;div data-role="carousel" data-effect="switch"&gt;
                    ...
                    &lt;/div&gt;

                    &lt;div data-role="carousel" data-effect="fade"&gt;
                    ...
                    &lt;/div&gt;
                </code></pre>


                <h4 id="_carousel_effects_duration">Duration and period</h4>
                <p>
                    The speed of applying the effect is determined by the duration parameter, which can be set via the attribute <code>data-duration</code>. The default value for <code>duration</code> is <code>1s</code>.
                    The interval between slides is determined by the period parameter and can be specified via the attribute <code>data-period</code>. The default value for <code>data-period</code> is <code>5s</code>.
                </p>
                <div class="example">
                    <div data-role="carousel"
                         data-cls-controls="fg-cyan"
                         data-effect="slide"
                         data-controls="false"
                         data-bullets="false"
                         data-auto-start="true"
                         data-period="3000"
                         data-duration="500">
                        <div class="slide" data-cover="images/bg-1.jpg"></div>
                        <div class="slide" data-cover="images/bg-2.jpg"></div>
                        <div class="slide" data-cover="images/bg-3.jpg"></div>
                        <div class="slide" data-cover="images/bg-4.jpg"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                         data-period="3000"
                         data-duration="500"&gt;
                    ...
                    &lt;/div&gt;
                </code></pre>

                <h4 id="_carousel_effects_duration_slide">Slide timings</h4>
                <p>
                    Also, you can set <code>duration</code> and <code>period</code> option individual for each slide in carousel.
                </p>
                <div class="example">
                    <div data-role="carousel"
                         data-cls-controls="fg-cyan"
                         data-effect="slide"
                         data-controls="false"
                         data-bullets="false"
                         data-auto-start="true">
                        <div class="slide fg-white d-flex flex-align-center flex-justify-center" data-cover="images/bg-1.jpg" data-period="3000">This slide showing 3sec</div>
                        <div class="slide d-flex flex-align-center flex-justify-center" data-cover="images/bg-2.jpg" data-period="5000">This slide showing 5sec</div>
                        <div class="slide d-flex flex-align-center flex-justify-center" data-cover="images/bg-3.jpg" data-period="1000">This slide showing 1sec</div>
                        <div class="slide d-flex flex-align-center flex-justify-center" data-cover="images/bg-4.jpg" data-period="10000">This slide showing 10sec</div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                         data-cls-controls="fg-cyan"
                         data-effect="slide"
                         data-controls="false"
                         data-bullets="false"
                         data-auto-start="true"&gt;
                        &lt;div class="slide" data-cover="images/bg-1.jpg"
                             data-period="3000"&gt;This slide showing 3sec&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-2.jpg"
                             data-period="5000"&gt;This slide showing 5sec&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-3.jpg"
                             data-period="1000"&gt;This slide showing 1sec&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-4.jpg"
                             data-period="10000"&gt;This slide showing 10sec&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>


                <h4 id="_carousel_effects_func">Easing function</h4>
                <p>
                    For effect <code>slide</code> you can use additional parameter: <code>effectFunc</code>, which can be set via the <code>data-effect-func="..."</code> attribute.
                    Value for this parameter you can found on <a href="easing.html">this page</a>
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <div data-role="carousel"
                                 data-cls-controls="fg-cyan"
                                 data-effect="slide"
                                 data-effect-func="easeOutBounce"
                                 data-controls="false"
                                 data-bullets="false"
                                 data-auto-start="true"
                                 data-period="3000"
                                 data-duration="1000">
                                <div class="slide" data-cover="images/bg-1.jpg"></div>
                                <div class="slide" data-cover="images/bg-2.jpg"></div>
                                <div class="slide" data-cover="images/bg-3.jpg"></div>
                                <div class="slide" data-cover="images/bg-4.jpg"></div>
                            </div>
                        </div>
                        <div class="cell-md-6">
                            <div data-role="carousel"
                                 data-cls-controls="fg-cyan"
                                 data-effect="slide"
                                 data-effect-func="easeInQuart"
                                 data-controls="false"
                                 data-bullets="false"
                                 data-auto-start="true"
                                 data-period="3000"
                                 data-duration="1000">
                                <div class="slide" data-cover="images/bg-1.jpg"></div>
                                <div class="slide" data-cover="images/bg-2.jpg"></div>
                                <div class="slide" data-cover="images/bg-3.jpg"></div>
                                <div class="slide" data-cover="images/bg-4.jpg"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                        data-effect="slide"
                        data-effect-func="easeOutBounce"&gt;
                    ...
                    &lt;/div&gt;

                    &lt;div data-role="carousel"
                        data-effect="slide"
                        data-effect-func="easeInQuart"&gt;
                    ...
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_carousel_options">Options</h3>
                <p>
                    The <code>carousel</code> component has a number of options. You can use that options to set style and behavior of component.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Option</th>
                        <th>Data-*</th>
                        <th>Default</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>autoStart</td>
                        <td><code>data-auto-start</code></td>
                        <td>false</td>
                        <td>If true, carousel started automatically</td>
                    </tr>
                    <tr>
                        <td>width</td>
                        <td><code>data-width</code></td>
                        <td>100%</td>
                        <td>The width of carousel, can be percent or int value</td>
                    </tr>
                    <tr>
                        <td>height</td>
                        <td><code>data-height</code></td>
                        <td>16/9</td>
                        <td>The height of carousel, can be: 16/9, 21/9, 4/3 or pixel value</td>
                    </tr>
                    <tr>
                        <td>effect</td>
                        <td><code>data-effect</code></td>
                        <td>slide</td>
                        <td>The effect for carousel, can be slide, slide-v, switch or fade</td>
                    </tr>
                    <tr>
                        <td>effectFunc</td>
                        <td><code>data-effect-func</code></td>
                        <td>linear</td>
                        <td>The easing function for effect for carousel</td>
                    </tr>
                    <tr>
                        <td>direction</td>
                        <td><code>data-direction</code></td>
                        <td>left</td>
                        <td>The direction for sliding for carousel. Can be left or right</td>
                    </tr>
                    <tr>
                        <td>duration</td>
                        <td><code>data-duration</code></td>
                        <td>1000</td>
                        <td>The duration sliding own slide. Value in milliseconds</td>
                    </tr>
                    <tr>
                        <td>period</td>
                        <td><code>data-period</code></td>
                        <td>5000</td>
                        <td>The period sliding own slide. Value in milliseconds</td>
                    </tr>
                    <tr>
                        <td>stopOnMouse</td>
                        <td><code>data-stop-on-mouse</code></td>
                        <td>true</td>
                        <td>If true and autoStart is true carousel stopped when mouse is entered</td>
                    </tr>
                    <tr>
                        <td>controls</td>
                        <td><code>data-controls</code></td>
                        <td>true</td>
                        <td>Show or hide left, right controls</td>
                    </tr>
                    <tr>
                        <td>bullets</td>
                        <td><code>data-bullets</code></td>
                        <td>true</td>
                        <td>Show or hide bullets</td>
                    </tr>
                    <tr>
                        <td>bulletsStyle</td>
                        <td><code>data-bullets-style</code></td>
                        <td>square</td>
                        <td>Set bullets style. Can be square, circle, rect or diamond</td>
                    </tr>
                    <tr>
                        <td>bulletsSize</td>
                        <td><code>data-bullets-size</code></td>
                        <td>default</td>
                        <td>Set bullets size. Can be default, mini, small, large</td>
                    </tr>
                    <tr>
                        <td>controlsOnMouse</td>
                        <td><code>data-controls-on-mouse</code></td>
                        <td>false</td>
                        <td>if true controls and bullets can visible on mouse over</td>
                    </tr>
                    <tr>
                        <td>controlsOutside</td>
                        <td><code>data-controls-outside</code></td>
                        <td>false</td>
                        <td>Put controls and bullets to outside the slides area</td>
                    </tr>
                    <tr>
                        <td>bulletsPosition</td>
                        <td><code>data-bullets-position</code></td>
                        <td>center</td>
                        <td>Bullets position. Can be center, left or right</td>
                    </tr>
                    </tbody>
                </table>
                <p>
                    You can set a number of option for each slide:
                        <code>period</code>,
                        <code>duration</code>,
                        <code>cover</code>.
                </p>

                <h3 id="_carousel_events">Events</h3>
                <p>
                    When carousel works, it generated the numbers of events. You can use callback for this events to behavior with component.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>onStop(el)</td>
                        <td><code>data-on-stop</code></td>
                        <td>Fired when carousel stopped</td>
                    </tr>
                    <tr>
                        <td>onStart(el)</td>
                        <td><code>data-on-start</code></td>
                        <td>Fired when carousel started</td>
                    </tr>
                    <tr>
                        <td>onPlay(el)</td>
                        <td><code>data-on-play</code></td>
                        <td>Fired when carousel started when play method</td>
                    </tr>
                    <tr>
                        <td>onSlideClick(slide, el, event)</td>
                        <td><code>data-on-slide-click</code></td>
                        <td>Fired when user click on slide</td>
                    </tr>
                    <tr>
                        <td>onBulletClick(bullet, el, event)</td>
                        <td><code>data-on-bullet-click</code></td>
                        <td>Fired when user click on bullet</td>
                    </tr>
                    <tr>
                        <td>onMouseEnter(element, event)</td>
                        <td><code>data-on-mouse-enter</code></td>
                        <td>Fired when mouse entered on component</td>
                    </tr>
                    <tr>
                        <td>onMouseLeave(element, event)</td>
                        <td><code>data-on-mouse-leave</code></td>
                        <td>Fired when mouse leave the component</td>
                    </tr>
                    <tr>
                        <td>onNextClick(el, event)</td>
                        <td><code>data-on-next-click</code></td>
                        <td>Fired click next (to right) switch</td>
                    </tr>
                    <tr>
                        <td>onPrevClick(el, event)</td>
                        <td><code>data-on-next-click</code></td>
                        <td>Fired click prev (to left) switch</td>
                    </tr>
                    <tr>
                        <td>onSlideShow(slide)</td>
                        <td><code>data-on-slide-show</code></td>
                        <td>Fired when slide show</td>
                    </tr>
                    <tr>
                        <td>onSlideHide(slide)</td>
                        <td><code>data-on-slide-hide</code></td>
                        <td>Fired when slide hide</td>
                    </tr>
                    <tr>
                        <td>onCarouselCreate(el)</td>
                        <td><code>data-on-carousel-create</code></td>
                        <td>Fired when carousel is created</td>
                    </tr>
                    </tbody>
                </table>

                <h3 id="_carousel_methods">Methods</h3>
                <p>
                    Component carousel has a number of methods to manipulate component.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Method</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>toSlide(index)</code></td>
                        <td>Go to specific slide</td>
                    </tr>
                    <tr>
                        <td><code>next()</code></td>
                        <td>Go to next slide</td>
                    </tr>
                    <tr>
                        <td><code>prev()</code></td>
                        <td>Go to prev slide</td>
                    </tr>
                    <tr>
                        <td><code>stop()</code></td>
                        <td>Stop the carousel</td>
                    </tr>
                    <tr>
                        <td><code>play()</code></td>
                        <td>Play the carousel</td>
                    </tr>
                    </tbody>
                </table>
                <div class="example">
                    <div data-role="carousel" id="carousel_methods"
                         data-period="3000"
                         data-duration="1000">
                        <div class="slide" data-cover="images/bg-1.jpg"></div>
                        <div class="slide" data-cover="images/bg-2.jpg"></div>
                        <div class="slide" data-cover="images/bg-3.jpg"></div>
                        <div class="slide" data-cover="images/bg-4.jpg"></div>
                    </div>
                    <div class="mt-2 text-center">
                        <button class="button" onclick="$('#carousel_methods').data('carousel').play()">Play</button>
                        <button class="button" onclick="$('#carousel_methods').data('carousel').stop()">Stop</button>
                        <button class="button" onclick="$('#carousel_methods').data('carousel').next()">Next</button>
                        <button class="button" onclick="$('#carousel_methods').data('carousel').prev()">Prev</button>
                    </div>
                    <script>

                    </script>
                </div>
                <pre><code>
                    var car = $(element).data('carousel');
                    car.stop();
                    car.play();
                    car.next();
                    car.prev();
                </code></pre>

                <h3 id="_carousel_customize">Customize</h3>
                <p>
                    You can customise carousel with special parameters. You can set customisation parameters with a specific attributes.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Option</th>
                        <th>Data-*</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>controlPrev</td>
                        <td><code>data-control-prev</code></td>
                        <td>Icon for prev control</td>
                    </tr>
                    <tr>
                        <td>controlNext</td>
                        <td><code>data-control-next</code></td>
                        <td>Icon for next control</td>
                    </tr>
                    <tr>
                        <td>clsCarousel</td>
                        <td><code>data-cls-carousel</code></td>
                        <td>Additional class for carousel</td>
                    </tr>
                    <tr>
                        <td>clsSlides</td>
                        <td><code>data-cls-slides</code></td>
                        <td>Additional class for slides container</td>
                    </tr>
                    <tr>
                        <td>clsSlide</td>
                        <td><code>data-cls-slide</code></td>
                        <td>Additional class for slides</td>
                    </tr>
                    <tr>
                        <td>clsControls</td>
                        <td><code>data-cls-controls</code></td>
                        <td>Additional class for left, right controls</td>
                    </tr>
                    <tr>
                        <td>clsControlNext</td>
                        <td><code>data-cls-control-next</code></td>
                        <td>Additional class for next control</td>
                    </tr>
                    <tr>
                        <td>clsControlPrev</td>
                        <td><code>data-cls-control-prev</code></td>
                        <td>Additional class for prev control</td>
                    </tr>
                    <tr>
                        <td>clsBullets</td>
                        <td><code>data-cls-bullets</code></td>
                        <td>Additional class bullets</td>
                    </tr>
                    <tr>
                        <td>clsBullet</td>
                        <td><code>data-cls-bullet</code></td>
                        <td>Additional class bullet</td>
                    </tr>
                    <tr>
                        <td>clsBulletOn</td>
                        <td><code>data-cls-bullet-on</code></td>
                        <td>Additional class active bullet</td>
                    </tr>
                    </tbody>
                </table>
                <div class="example">
                    <div data-role="carousel"
                         data-height="21/9"
                         data-cls-controls="fg-red"
                         data-cls-bullet="bullet-big"
                         data-cls-bullet-on="bg-red drop-shadow"
                         data-cls-slides="rounded"
                         data-control-next="<span class='mif-arrow-right'></span>"
                         data-control-prev="<span class='mif-arrow-left'></span>"
                         data-auto-start="true"
                         data-period="3000"
                         data-duration="1000">
                        <div class="slide" data-cover="images/bg-1.jpg"></div>
                        <div class="slide" data-cover="images/bg-2.jpg"></div>
                        <div class="slide" data-cover="images/bg-3.jpg"></div>
                        <div class="slide" data-cover="images/bg-4.jpg"></div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;div data-role="carousel"
                         data-height="21/9"
                         data-cls-controls="fg-red"
                         data-cls-bullet="bullet-big"
                         data-cls-bullet-on="bg-red drop-shadow"
                         data-cls-slides="rounded"
                         data-control-next="&lt;span class='mif-arrow-right'&gt;&lt;/span&gt;"
                         data-control-prev="&lt;span class='mif-arrow-left'&gt;&lt;/span&gt;"
                         data-auto-start="true"
                         data-period="3000"
                         data-duration="1000"&gt;
                        &lt;div class="slide" data-cover="images/bg-1.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-2.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-3.jpg"&gt;&lt;/div&gt;
                        &lt;div class="slide" data-cover="images/bg-4.jpg"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                </code></pre>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>